<script setup lang="ts">

const model = defineModel<string>({default: ""})
const emits = defineEmits<{
    (e: 'search', keyword: string): void
}>()

function search() {
    emits("search", model.value)
}

</script>

<template>
    <div class="top">
        <div class="frame">
            <van-search v-model="model" placeholder="请输入搜索内容" style="padding: 5px"/>
        </div>
        <div class="word" @click="search">搜索</div>
    </div>
</template>

<style scoped lang="less">
.top {
  display: flex;
  justify-content: space-between;

  .frame {
    width: 88%;

    .van-search {
      padding-left: 0;
      background-color: #F5F5F5;

      :deep(.van-search__field) {
        background-color: #e7e7e7;
        border-radius: 3px;
      }
    }
  }

  .word {
    font-weight: 600;
    color: #39a9ed;
    padding: 0 5px;
    width: 10%;
    height: 50px;
    line-height: 50px;
  }
}
</style>